<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/resources/global/jsp/init.jsp"/>
<title>朋友圈列表界面</title>
<style type="text/css">
body {
	text-align: center;
}

#div_button_group {
	width: 100%;
	height: 30px;
	position: fixed;
	top: 0;
	opacity: 0.75;
	margin-right: auto;
	margin-left: auto;
	margin-top: 70px;
}

textarea {
	resize: none;
	height: 50px;
	width: 600px;
}

#tbl_moment thead th {
	background-color: rgb(156, 186, 95);
	color: #fff;
	border-bottom-width: 0;
}

/* Column Style */
#tbl_moment td {
	color: #000;
}
/* Heading and Column Style */
#tbl_moment tr, #tbl_moment th {
	border-width: 1px;
	border-style: solid;
	border-color: rgb(156, 186, 95);
}

/* Padding and font style */
#tbl_moment td {
	padding: 5px 10px;
	font-size: 14px;
	font-family: Verdana;
	font-weight: bold;
	text-align: left;
}

#tbl_moment th {
	padding: 5px 10px;
	font-size: 14px;
	font-family: Verdana;
	font-weight: bold;
}

a {
	text-transform: none;
	text-decoration: none;
}
</style>
</head>
<script type="text/javascript">
$(function() {
	getTheNewestMomentForIndex();
});
function getTheNewestMomentForIndex() {
	//获取最新的10条朋友圈
	$.ajax({
		url : 'doNotNeedSecurityGetTheNewestMoment.do',
		dataType : 'json',
		type : 'post',
		success : function(data) {
			if(data && data.obj && data.obj.length > 0) {
				//移除<tr>元素
				$("#tbl_moment tbody tr").remove();
				for(var i in data.obj) {
					var jsonObject = data.obj[i];
					var trBegin = "<tr>";
					var id = "<td>" + (parseInt(i,10)+1) + "</td>";
					trBegin += id;
					var content = "<td>" + jsonObject.content + "</td>";
					trBegin += content;
					var dateTime = "<td>" + jsonObject.createDateDescr + " " + jsonObject.createTimeDescr + "</td>";
					trBegin += dateTime;
					var trEnd = "</tr>";
					trBegin += "<td><button onclick=favourite('" + jsonObject.uuid + "') id='btn_"+ jsonObject.uuid +"'>favourite</button></td>";
					trBegin += trEnd;
					
					if(jsonObject.favouriedMngUserModels && jsonObject.favouriedMngUserModels.length != 0) {
						//点赞用户用一行tr显示
						var trFavourited = "<tr><td>点赞用户:</td><td colspan='3'>";
						var userNameArray = new Array();
						for(var j in jsonObject.favouriedMngUserModels) {
							userNameArray.push(jsonObject.favouriedMngUserModels[j].name);
						}
						trFavourited += userNameArray.join(",");
						trFavourited += "</td></tr>";
						trBegin += trFavourited;
					}
					
					$("#tbl_moment tbody").append(trBegin);
				}
			}
		}
	});
}
function favourite(momentUUID) {
	$.ajax({
		url : 'favourite.do',
		dataType : 'json',
		type : 'post',
		data : {
			momentUUID : momentUUID
		},
		success : function(data) {
			if(data.success) {
				getTheNewestMomentForIndex();
			}
		}
	});
}
</script>
<body>
	<div style="text-align: center; margin-top: 50px;">
		<table id="tbl_moment" style="margin: auto;">
			<thead>
				<tr>
					<th></th>
					<th style="width: 600px;">朋友圈内容</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
</body>
</html>